import React, { useEffect, useState } from "react";
import "./i18n";

import "@/App.css";
import PWA from "@/pwa/PWA.tsx";
import Routing from "@/routes";
import { tools } from "@/utils";
import { BrowserRouter } from "react-router-dom";

PWA();

const App: React.FC = () => {
  const [landingVisible, setLandingVisible] = useState<boolean>();
  const [debugMode, setDebugMode] = useState<boolean>();
  const consoleBuildTime = () => {
    const styles = [
      "color: white",
      "background: green",
      "font-size: 12px",
      "text-shadow: 1px 1px black",
    ].join(";");
    console.log("%cBuild Time: " + process.env.BUILD_TIME, styles);
    console.log("%cBuild Version: " + process.env.PACKAGE_VERSION, styles);
  };
  const activeDebugMode = () => {
    if (
      new RegExp("debug").test(document.location.href) ||
      (process.env.NODE_ENV !== "production" &&
        tools.uaIs().mobile &&
        !new RegExp("localhost").test(document.location.href)) ||
      sessionStorage.getItem("debugMode")
    ) {
      // 1.url 存在debug 2. 开发环境 && 手机端 && 非localhost 3. 存在debugMode
      setDebugMode(true);
    }
  };
  useEffect(() => {
    consoleBuildTime();
    activeDebugMode();
  }, []);
  useEffect(() => {
    if (debugMode) {
      const vconsole = require("vconsole");
      new vconsole();
    }
  }, [debugMode]);
  return (
    <BrowserRouter>
      <React.Suspense>
        <Routing />
      </React.Suspense>
    </BrowserRouter>
  );
};

export default App;
